<template>
  <div class="midArea h">
    <!-- 搜索 -->
    <div class="search flex vcenter" style="justify-content:space-evenly">
      <el-input
        placeholder="搜索"
        v-model="search"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <div class="chackBtn flex lcenter vcenter pointer" @click="isShowAddFriendBox = true">
        <i class="el-icon-plus"></i>
      </div>
    </div>
    <!-- 聊天菜单 -->
    <div class="midList w border">
      <div v-for="(item, index) in chatList" :key="index" @click="chatListToChat(index)" class="userBox w flex vcenter TranslucentBorder"> 
        <el-avatar shape="square" size="large" icon="el-icon-user-solid" class="m5" style="background:rgb(250, 157, 59)" ></el-avatar>
        <div class="m5" style="width:180px">
          <div>{{item.friendRemarksName}}</div>
          <div class="grayText smallFont" style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
            <span v-if="item.lastChatRecord.includes('<img')">[[图片]]</span>
            <span v-else-if="item.lastChatRecord.includes('uploadFiles')">[[文件]]</span>
            <span v-else>{{item.lastChatRecord}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      chatList: [],
    }
  },
  mounted() {
    this.getChatList()
  },
  methods: {
    getChatList(){
      this.$axios.post('http://localhost:3000/user/getChatList', { userData: this.$store.state.chatUserInfo, })
        .then((res) => {
          // console.log(res);
          this.chatList = res.data.chatList
        })
    },
    chatListToChat(index) {
      this.$store.commit('setChackChatUser', {
        remarksName: this.chatList[index].friendRemarksName ,
        account: this.chatList[index].friendAccount,
      })
      // console.log(this.$store.state.chackChatUser);
    },
  },
}
</script>

<style>
.search{
  width: 100%;
  height: 10%;
}
.el-input{
  width: 80%;
}
.el-input__inner{
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  background-color: rgb(215, 215, 215, 0.8);
  font-size: 12px;
}
.el-input__icon{
  height: 30px;
  line-height: 30px;
  color: rgb(176, 176, 176);
}
</style>